import React from 'react';
import { useNavigate } from 'react-router-dom';
import { NavBar, Card, Image } from 'antd-mobile';
import { LeftOutline } from 'antd-mobile-icons';
import styles from './SchoolIntro.module.css';

function SchoolIntro() {
  const navigate = useNavigate();

  const handleBack = () => {
    navigate(-1);
  };

  const schoolInfo = {
    name: '武汉大学',
    englishName: 'Wuhan University',
    founded: '1893年',
    type: '综合性全国重点大学',
    level: '985工程、211工程、双一流',
    location: '湖北省武汉市',
    motto: '自强、弘毅、求是、拓新',
    description: '武汉大学是国家教育部直属重点综合性大学，是国家"985工程"和"211工程"重点建设高校，是首批"双一流"建设高校。',
    features: [
      {
        title: '历史悠久',
        content: '溯源于1893年清末湖广总督张之洞奏请清政府创办的自强学堂，历经传承演变，1928年定名为国立武汉大学，是近代中国第一批国立大学。',
        icon: '🏛️'
      },
      {
        title: '学科齐全',
        content: '学校现有34个学院（系），123个本科专业，涵盖了哲、经、法、教育、文、史、理、工、农、医、管理、艺术等12个学科门类。',
        icon: '📚'
      },
      {
        title: '师资雄厚',
        content: '学校现有专任教师3700余人，其中正副教授2900余人，有11位中国科学院院士、7位中国工程院院士、3位欧亚科学院院士。',
        icon: '👨‍🏫'
      },
      {
        title: '环境优美',
        content: '武汉大学环绕东湖水，坐拥珞珈山，校园环境优美，风景如画，被誉为"中国最美丽的大学"。',
        icon: '🌸'
      }
    ],
    stats: [
      { label: '在校学生', value: '5万+', icon: '👥' },
      { label: '专任教师', value: '3700+', icon: '👨‍🏫' },
      { label: '本科专业', value: '123个', icon: '📖' },
      { label: '校园面积', value: '5195亩', icon: '🏞️' }
    ]
  };

  return (
    <div className={styles.container}>
      {/* 导航栏 */}
      <NavBar 
        onBack={handleBack}
        backIcon={<LeftOutline />}
        className={styles.navbar}
      >
        学校介绍
      </NavBar>

      {/* 主要内容 */}
      <div className={styles.content}>
        {/* 学校头部信息 */}
        <div className={styles.schoolHeader}>
          <div className={styles.schoolBanner}>
            <div className={styles.schoolLogo}>🏫</div>
            <div className={styles.schoolBasicInfo}>
              <h1 className={styles.schoolName}>{schoolInfo.name}</h1>
              <p className={styles.schoolEnglishName}>{schoolInfo.englishName}</p>
              <div className={styles.schoolTags}>
                <span className={styles.tag}>{schoolInfo.level}</span>
                <span className={styles.tag}>{schoolInfo.type}</span>
              </div>
            </div>
          </div>
          <div className={styles.schoolMotto}>
            <span className={styles.mottoLabel}>校训：</span>
            <span className={styles.mottoText}>{schoolInfo.motto}</span>
          </div>
        </div>

        {/* 基本信息 */}
        <Card className={styles.infoCard}>
          <div className={styles.cardHeader}>
            <h3 className={styles.cardTitle}>基本信息</h3>
          </div>
          <div className={styles.infoGrid}>
            <div className={styles.infoItem}>
              <span className={styles.infoLabel}>创建时间</span>
              <span className={styles.infoValue}>{schoolInfo.founded}</span>
            </div>
            <div className={styles.infoItem}>
              <span className={styles.infoLabel}>学校类型</span>
              <span className={styles.infoValue}>{schoolInfo.type}</span>
            </div>
            <div className={styles.infoItem}>
              <span className={styles.infoLabel}>学校层次</span>
              <span className={styles.infoValue}>{schoolInfo.level}</span>
            </div>
            <div className={styles.infoItem}>
              <span className={styles.infoLabel}>所在地区</span>
              <span className={styles.infoValue}>{schoolInfo.location}</span>
            </div>
          </div>
        </Card>

        {/* 学校简介 */}
        <Card className={styles.descCard}>
          <div className={styles.cardHeader}>
            <h3 className={styles.cardTitle}>学校简介</h3>
          </div>
          <p className={styles.description}>{schoolInfo.description}</p>
        </Card>

        {/* 数据统计 */}
        <Card className={styles.statsCard}>
          <div className={styles.cardHeader}>
            <h3 className={styles.cardTitle}>数据一览</h3>
          </div>
          <div className={styles.statsGrid}>
            {schoolInfo.stats.map((stat, index) => (
              <div key={index} className={styles.statItem}>
                <div className={styles.statIcon}>{stat.icon}</div>
                <div className={styles.statValue}>{stat.value}</div>
                <div className={styles.statLabel}>{stat.label}</div>
              </div>
            ))}
          </div>
        </Card>

        {/* 学校特色 */}
        <Card className={styles.featuresCard}>
          <div className={styles.cardHeader}>
            <h3 className={styles.cardTitle}>学校特色</h3>
          </div>
          <div className={styles.featuresList}>
            {schoolInfo.features.map((feature, index) => (
              <div key={index} className={styles.featureItem}>
                <div className={styles.featureIcon}>{feature.icon}</div>
                <div className={styles.featureContent}>
                  <h4 className={styles.featureTitle}>{feature.title}</h4>
                  <p className={styles.featureDesc}>{feature.content}</p>
                </div>
              </div>
            ))}
          </div>
        </Card>
      </div>
    </div>
  );
}

export default SchoolIntro;